<template>
  <div class="app-container customer-div" style="overflow-x: auto">
    <div style="min-width: 1200px">
      <el-card class="box-card"  shadow="never">
        <div slot="header" class="clearfix" >
          <el-menu :default-active="tab" class="el-menu-demo" mode="horizontal" @select="changeTab">
            <el-menu-item index="1">客户开发进度</el-menu-item>
            <el-menu-item index="2">产品开发进度</el-menu-item>
            <el-menu-item index="3">客户开发月目标统计</el-menu-item>
          </el-menu>
        </div>
        <div class="analys-con" v-show="tab == 1">
          <el-card class="box-card" >
            <el-menu :default-active="listQuery.tab" class="el-menu-demo" mode="horizontal" @select="selectTab">
              <el-menu-item index="my">我负责的</el-menu-item>
              <el-menu-item index="share">共享（师徒）</el-menu-item>
              <el-menu-item index="department">部门（军团）</el-menu-item>
              <el-menu-item index="all" v-if="allCustomerGoodsLineAnalysis">全部</el-menu-item>
            </el-menu>
            <el-form :inline="true" :model="listQuery" size="mini" label-width="50px" style="margin-top:20px;" v-if="listQuery.tab != 'my'">
              <el-form-item label="业务员：" label-width="70px">
                <el-select style="width:100px" v-model="listQuery.userId" filterable clearable>
                  <el-option
                    v-for="item in userOptionList"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label-width="0px">
                <el-button
                  @click="handleSearchList()"
                  type="primary">
                  查询
                </el-button>
              </el-form-item>
            </el-form>
            <!--数据列表-->
            <div class="table-container">
              <el-table
                ref="multipleTable"
                v-loading="listLoading"
                :data="tableData"
                border
                style="width: 100%; margin-top: 20px">

                <el-table-column align="center" label="业务员" min-width="100">
                  <template slot-scope="scope">
                         {{scope.row.userName}}
                  </template>
                </el-table-column>
                <el-table-column label="项目" align="center" min-width="100" class-name="cspantd">
                  <template slot-scope="scope">
                    <div class="tdDiv" style="border-bottom: 1px solid #EBEEF5">目标平均天数</div>
                    <div class="tdDiv">实际平均天数</div>
                  </template>
                </el-table-column>
                <el-table-column min-width="100" label="找到关键人" align="center" class-name="cspantd">
                  <template slot-scope="scope">
                    <div class="tdDiv" style="border-bottom: 1px solid #EBEEF5">{{ scope.row.seedPeopleTargetDays }}</div>
                    <div class="tdDiv">{{ scope.row.seedPeopleTargetDays }}</div>
                  </template>
                </el-table-column>
                <el-table-column min-width="100" label="找到关键人 - 挖掘需求" align="center" class-name="cspantd">
                  <template slot-scope="scope">
                    <div class="tdDiv" style="border-bottom: 1px solid #EBEEF5">{{ scope.row.seedDemandTargetDays }}</div>
                    <div class="tdDiv">{{ scope.row.seedDemandActualDays }}</div>
                  </template>
                </el-table-column>
                <el-table-column min-width="100" label="挖掘需求 - 建立粘度" align="center" class-name="cspantd">
                  <template slot-scope="scope">
                    <div class="tdDiv" style="border-bottom: 1px solid #EBEEF5">{{ scope.row.buildRelationTargetDays }}</div>
                    <div class="tdDiv">{{ scope.row.buildRelationActualDays }}</div>
                  </template>
                </el-table-column>
                <el-table-column min-width="100" label="建立粘度 - 促成交" align="center" class-name="cspantd">
                  <template slot-scope="scope">
                    <div class="tdDiv" style="border-bottom: 1px solid #EBEEF5">{{ scope.row.promoteDealTargetDays }}</div>
                    <div class="tdDiv">{{ scope.row.promoteDealActualDays }}</div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
<!--            <div class="pagination-container">-->
<!--              <el-pagination-->
<!--                background-->
<!--                @size-change="handleSizeChange"-->
<!--                @current-change="handleCurrentChange"-->
<!--                layout="total, sizes,prev, pager, next,jumper"-->
<!--                :current-page.sync="listQuery.pageNum"-->
<!--                :page-size="listQuery.pageSize"-->
<!--                :page-sizes="[10,15,20,50,100]"-->
<!--                :total="count">-->
<!--              </el-pagination>-->
<!--            </div>-->
          </el-card>
        </div>
        <div class="analys-con" v-show="tab == 2">
          <el-card class="box-card" >
            <el-menu :default-active="listQuery2.tab" class="el-menu-demo" mode="horizontal" @select="selectTab2">
              <el-menu-item index="my">我负责的</el-menu-item>
              <el-menu-item index="share">共享（师徒）</el-menu-item>
              <el-menu-item index="department">部门（军团）</el-menu-item>
              <el-menu-item index="all" v-if="allCustomerGoodsLineAnalysis">全部</el-menu-item>
            </el-menu>
            <el-form :inline="true" :model="listQuery2" size="mini" label-width="50px" style="margin-top:20px;" >
              <el-form-item label="业务员：" label-width="70px" v-if="listQuery2.tab != 'my'">
                <el-select style="width:100px" v-model="listQuery2.userId" filterable clearable>
                  <el-option
                    v-for="item in userOptionList"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="月份：" label-width="70px">
                <el-date-picker
                  value-format="yyyy-MM"
                  v-model="listQuery2.summaryMonth"
                  type="monthrange"
                  range-separator="至"
                  start-placeholder="开始月份"
                  end-placeholder="结束月份">
                </el-date-picker>
              </el-form-item>
              <el-form-item label-width="0px">
                <el-button
                  @click="handleSearchList2()"
                  type="primary">
                  查询
                </el-button>
                <el-button
                  :loading="btnLoading2"
                  v-if="listQuery2.tab == 'all'"
                  @click="downloadExcel2()"
                  type="primary">
                  导出
                </el-button>
              </el-form-item>
            </el-form>
            <!--数据列表-->
            <div class="table-container">
              <el-table
                ref="multipleTable"
                v-loading="listLoading2"
                :data="tableData2"
                border
                style="width: 100%; margin-top: 20px">
                <el-table-column align="center" label="月份" min-width="100">
                  <template slot-scope="scope">
                       {{scope.row.summaryMonth}}
                  </template>
                </el-table-column>

                <el-table-column align="center" label="业务员" min-width="100">
                  <template slot-scope="scope">
                    {{scope.row.userName}}
                  </template>
                </el-table-column>
                <el-table-column label="客户总量" align="center" min-width="100">
                  <template slot-scope="scope">
                    {{scope.row.customerNum}}
                    <i class="el-icon-bottom" v-if="scope.row.customerNumMore == -1"></i>
                    <i class="el-icon-top"  v-if="scope.row.customerNumMore == 1"></i>
                  </template>
                </el-table-column>
                <el-table-column min-width="100" label="产品线客户数" align="center">
                  <template slot-scope="scope">
                    {{scope.row.goodsLineNum}}
                    <i class="el-icon-bottom" v-if="scope.row.goodsLineNumMore == -1"></i>
                    <i class="el-icon-top"  v-if="scope.row.goodsLineNumMore == 1"></i>
                  </template>
                </el-table-column>
                <el-table-column min-width="100" label="寻找关键人" align="center">
                  <template slot-scope="scope">
                    {{scope.row.seedPeopleNum}}
                    <i class="el-icon-bottom" v-if="scope.row.seedPeopleNumMore == -1"></i>
                    <i class="el-icon-top"  v-if="scope.row.seedPeopleNumMore == 1"></i>
                  </template>
                </el-table-column>
                <el-table-column min-width="100" label="挖掘需求" align="center">
                  <template slot-scope="scope">
                    {{scope.row.seedDemandNum}}
                    <i class="el-icon-bottom" v-if="scope.row.seedDemandNumMore == -1"></i>
                    <i class="el-icon-top"  v-if="scope.row.seedDemandNumMore == 1"></i>
                  </template>
                </el-table-column>
                <el-table-column min-width="100" label="建立粘度" align="center">
                  <template slot-scope="scope">
                    {{scope.row.buildRelationNum}}
                    <i class="el-icon-bottom" v-if="scope.row.buildRelationNumMore == -1"></i>
                    <i class="el-icon-top"  v-if="scope.row.buildRelationNumMore == 1"></i>
                  </template>
                </el-table-column>
                <el-table-column min-width="100" label="促成交" align="center">
                  <template slot-scope="scope">
                    {{scope.row.promoteDealNum}}
                    <i class="el-icon-bottom" v-if="scope.row.promoteDealNumMore == -1"></i>
                    <i class="el-icon-top"  v-if="scope.row.promoteDealNumMore == 1"></i>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="pagination-container">
              <el-pagination
                background
                @size-change="handleSizeChange2"
                @current-change="handleCurrentChange2"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="listQuery2.pageNum"
                :page-size="listQuery2.pageSize"
                :page-sizes="[10,15,20,50,100]"
                :total="count2">
              </el-pagination>
            </div>
          </el-card>
        </div>
        <div class="analys-con" v-show="tab == 3">
          <el-card class="box-card" >
            <el-menu :default-active="listQuery3.tab" class="el-menu-demo" mode="horizontal" @select="selectTab3">
              <el-menu-item index="my">我负责的</el-menu-item>
              <el-menu-item index="share">共享（师徒）</el-menu-item>
              <el-menu-item index="department">部门（军团）</el-menu-item>
              <el-menu-item index="all" v-if="allCustomerGoodsLineAnalysis">全部</el-menu-item>
            </el-menu>

            <el-form :inline="true" :model="listQuery3" size="mini" label-width="50px" style="margin-top:20px;"  >
              <el-form-item label="业务员：" label-width="70px" v-if="listQuery3.tab != 'my'">
                <el-select style="width:100px" v-model="listQuery3.userId" filterable clearable>
                  <el-option
                    v-for="item in userOptionList"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="进阶时间：" label-width="100px">
                <el-date-picker
                  value-format="yyyy-MM"
                  v-model="listQuery3.summaryMonth"
                  type="monthrange"
                  range-separator="至"
                  start-placeholder="开始月份"
                  end-placeholder="结束月份">
                </el-date-picker>
              </el-form-item>
              <el-form-item label-width="0px">
                <el-button
                  @click="handleSearchList3()"
                  type="primary">
                  查询
                </el-button>
              </el-form-item>
              <el-button
                size="mini"
                v-if="listQuery3.tab == 'all'"
                @click="downloadExcel3()"
                :loading="btnLoading3"
                type="primary">
                导出
              </el-button>
            </el-form>

            <!--数据列表-->
            <div class="table-container">
              <el-table
                ref="multipleTable5"
                v-loading="listLoading3"
                :data="tableData3"
                border
                style="width: 100%; margin-top: 20px">
                <el-table-column align="center" label="月份" min-width="100">
                  <template slot-scope="scope">
                        {{scope.row.summaryMonth}}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="业务员" min-width="100">
                  <template slot-scope="scope">
                    {{scope.row.userName}}
                  </template>
                </el-table-column>

                <el-table-column  label="寻找关键人" align="center">
                  <el-table-column min-width="100" label="目标数量" align="center">
                    <template slot-scope="scope">
                      {{scope.row.seedPeopleTargetNum}}
                    </template>
                  </el-table-column>
                  <el-table-column min-width="100" label="实际数量" align="center">
                    <template slot-scope="scope">
                      {{scope.row.seedPeopleNum}}
                    </template>
                  </el-table-column>
                  <el-table-column min-width="100" label="完成率" align="center">
                    <template slot-scope="scope">
                      {{scope.row.seedPeopleFinishedRate}}
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column  label="发掘需求" align="center">
                  <el-table-column min-width="100" label="目标数量" align="center">
                    <template slot-scope="scope">
                      {{scope.row.seedDemandTargetNum}}
                    </template>
                  </el-table-column>
                  <el-table-column min-width="100" label="实际数量" align="center">
                    <template slot-scope="scope">
                      {{scope.row.seedDemandNum}}
                    </template>
                  </el-table-column>
                  <el-table-column min-width="100" label="完成率" align="center">
                    <template slot-scope="scope">
                      {{scope.row.seedDemandFinishedRate}}
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column  label="建立粘度" align="center">
                  <el-table-column min-width="100" label="目标数量" align="center">
                    <template slot-scope="scope">
                      {{scope.row.buildRelationTargetNum}}
                    </template>
                  </el-table-column>
                  <el-table-column min-width="100" label="实际数量" align="center">
                    <template slot-scope="scope">
                      {{scope.row.buildRelationNum}}
                    </template>
                  </el-table-column>
                  <el-table-column min-width="100" label="完成率" align="center">
                    <template slot-scope="scope">
                      {{scope.row.buildRelationFinishedRate}}
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column  label="促成交" align="center">
                  <el-table-column min-width="100" label="目标数量" align="center">
                    <template slot-scope="scope">
                      {{scope.row.promoteDealTargetNum}}
                    </template>
                  </el-table-column>
                  <el-table-column min-width="100" label="实际数量" align="center">
                    <template slot-scope="scope">
                      {{scope.row.promoteDealNum}}
                    </template>
                  </el-table-column>
                  <el-table-column min-width="100" label="完成率" align="center">
                    <template slot-scope="scope">
                      {{scope.row.promoteDealFinishedRate}}
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="超期数量" min-width="100">
                  <template slot-scope="scope">
                    <span :style="{color:scope.row.unFinishNum > 0 ? 'Red' : '#606266'}">{{scope.row.unFinishNum}}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="pagination-container">
              <el-pagination
                background
                @size-change="handleSizeChange3"
                @current-change="handleCurrentChange3"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="listQuery3.pageNum"
                :page-size="listQuery3.pageSize"
                :page-sizes="[10,15,20,50,100]"
                :total="count3">
              </el-pagination>
            </div>
          </el-card>
        </div>
      </el-card>


    </div>

  </div>
</template>

<script>
import {capitalCostList} from "../api/partner";

const defaultListQuery={
  "userId"     : '',   //业务员ID
  "tab"        : "my", //类型(所有-all,部门-department,师徒-share,我的-my),

};

const defaultListQuery2={
  summaryMonth:[],
  "userId"     : '',   //业务员ID
  "tab"        : "my", //类型(所有-all,部门-department,师徒-share,我的-my),
  "pageNum" : 1,
  "pageSize" : 10
};

const defaultListQuery3={
  summaryMonth:[],
  "userId"     : '',   //业务员ID
  "tab"        : "my", //类型(所有-all,部门-department,师徒-share,我的-my),
  "pageNum" : 1,
  "pageSize" : 10
};
import {agentProcessBillList,getOrderUsersList} from '@/api/partner'
import {developSummary,developDetail,developMonthSummary} from '@/api/company'
import yearPicker from '@/views/components/yearPicker'
import {formatDate} from '@/utils/date';
import store from '@/store'
import { mapGetters } from 'vuex'

export default {
  name: "saleReport",
  data(){
    return{
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      tableData: [],
      count: 0,
      listLoading: false,
      roles:store.getters.roles ? store.getters.roles : [],
      btnLoading:false,
      userOptionList:[],
      tab:'1',

      listQuery2: JSON.parse(JSON.stringify(defaultListQuery)),
      tableData2: [],
      count2: 0,
      listLoading2: false,

      listQuery3: JSON.parse(JSON.stringify(defaultListQuery3)),
      tableData3: [],
      count3: 0,
      listLoading3: false,

      btnLoading2:false,
      btnLoading3:false

    }
  },
  components : {yearPicker},
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
    allCustomerGoodsLineAnalysis(){
      if(this.roles.indexOf("allCustomerGoodsLineAnalysis") != -1){
        return true
      }else{
        return false
      }
    },

  },
  created() {
    this.handleSearchList()
    this.getUserOptionList()
  },
  filters: {

  },
  methods:{
    downloadExcel2(){
      let params = JSON.parse(JSON.stringify(this.listQuery2));
      params.isExport = 1;
      delete params.pageNum;
      delete params.pageSize;
      this.btnLoading2 = true;
      developSummary(params).then((res)=>{
        this.btnLoading2 = false;
        require.ensure([], () => {
          const { export_json_to_excel } = require('sheet/Export2Excel');
          const tHeader = res.title;
          const filterVal = res.columns;
          const list = res.list;
          const data = this.formatJson(filterVal, list);
          export_json_to_excel(tHeader, data, res.fileName);
        })
      }).catch(()=>{
        this.btnLoading2 = false;
      })
    },
    downloadExcel3(){
      let params = JSON.parse(JSON.stringify(this.listQuery3));
      params.isExport = 1;
      delete params.pageNum;
      delete params.pageSize;
      this.btnLoading3 = true;
      developMonthSummary(params).then((res)=>{
        this.btnLoading3 = false;
        require.ensure([], () => {
          const { export_json_to_excel } = require('sheet/Export2Excel');
          const tHeader = res.title;
          const filterVal = res.columns;
          const list = res.list;
          const data = this.formatJson(filterVal, list);
          export_json_to_excel(tHeader, data, res.fileName);
        })
      }).catch(()=>{
        this.btnLoading3 = false;
      })
    },


    //下载表格数据格式化
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },


    changeTab(key){
      this.tab = key;
      if(this.tab == 1){
        this.listQuery = JSON.parse(JSON.stringify(defaultListQuery))
        this.handleSearchList()
      }else if(this.tab == 2){
        this.listQuery2 = JSON.parse(JSON.stringify(defaultListQuery2))
        this.handleSearchList2()
      }else if(this.tab == 3){
        this.listQuery3 = JSON.parse(JSON.stringify(defaultListQuery3))
        this.handleSearchList3()
      }
    },

    selectTab(key){
      this.listQuery = JSON.parse(JSON.stringify(defaultListQuery))
      this.listQuery.tab = key;
      this.handleSearchList();
    },

    selectTab2(key){
      this.listQuery2 = JSON.parse(JSON.stringify(defaultListQuery2))
      this.listQuery2.tab = key;
      this.handleSearchList2();
    },

    selectTab3(key){
      this.listQuery3 = JSON.parse(JSON.stringify(defaultListQuery3))
      this.listQuery3.tab = key;
      this.handleSearchList3();
    },


    //获取员工下拉选项
    getUserOptionList(){
      getOrderUsersList().then((res)=>{
        this.userOptionList = res;
      })
    },
    updateStatisticYear(val){
      console.log("val",val)
    },

    handleSizeChange(val){
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val){
      this.listQuery.pageNum = val;
      this.getList();
    },

    handleSearchList(){
      this.listQuery.pageNum = 1;
      this.getList();
    },

    //获取列表
    getList() {
      this.listLoading = true;
      developDetail(this.listQuery).then(response => {
        this.tableData = response.list;
        this.count = response.count;
        this.listLoading = false;
      }).catch(()=>{
        this.listLoading = false;
      });
    },

    //获取列表
    getList2() {
      this.listLoading2 = true;
      developSummary(this.listQuery2).then(response => {
        this.tableData2 = response.list;
        this.count2 = response.count;
        this.listLoading2 = false;
      }).catch(()=>{
        this.listLoading2 = false;
      });
    },

    handleSizeChange2(val){
      this.listQuery2.pageNum = 1;
      this.listQuery2.pageSize = val;
      this.getList2();
    },
    handleCurrentChange2(val){
      this.listQuery2.pageNum = val;
      this.getList2();
    },

    handleSearchList2(){
      this.listQuery2.pageNum = 1;
      this.getList2();
    },


    //获取列表
    getList3() {
      this.listLoading3 = true;
      developMonthSummary(this.listQuery3).then(response => {
        this.tableData3 = response.list;
        this.count3 = response.count;
        this.listLoading3 = false;
      }).catch(()=>{
        this.listLoading3 = false;
      });
    },

    handleSizeChange3(val){
      this.listQuery3.pageNum = 1;
      this.listQuery3.pageSize = val;
      this.getList3();
    },
    handleCurrentChange3(val){
      this.listQuery3.pageNum = val;
      this.getList3();
    },

    handleSearchList3(){
      this.listQuery3.pageNum = 1;
      this.getList3();
    },

  },
}
</script>

<style  lang="scss">

.box-card .el-card__header{
  //padding:0 !important;
}

.cspantd{
  padding:0 !important;
  .cell{
    padding:0 !important;
    .tdDiv{
      padding:5px 10px;
      min-height: 20px;
      line-height: 20px;
      box-sizing: content-box;
    }
  }
}
</style>
